<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>BlendModes</title>
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var stops = [];
		for (var i = 0; i < 6; i++)
			stops.push({ hue: (i - 3) * 60, saturation: 1, brightness: 1 });
		var size = new Size(150, 150)
		var background = new Path.Rectangle({
			rectangle: new Rectangle(size),
			fillColor: {
				stops: stops,
				origin: [0, 0],
				destination: [size.width, 0]
			}
		});

		var image = new Raster('ducky');
		image.fitBounds(background.bounds);

		background = new Symbol(background);
		image = new Symbol(image);

		var all = new Group();
		function makeExample(point, blendMode) {
			var rect = background.place();
			// var img = new Raster('ducky');
			var img = image.place();
			img.fitBounds(rect.bounds);
			img.blendMode = blendMode;
			var text = new PointText({
				point: [0, size.height / 2 + 15],
				fontSize: 14,
				justification: 'center',
				content: mode + (paper.support.nativeBlendModes[mode] ? ' (native)' : '')
			})
			var group = new Group(rect, img, text);
			group.position = point;
			all.addChild(group);
		}

		var modes = [ 'normal', 'multiply', 'screen', 'overlay', 'soft-light',
			'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
			'difference', 'exclusion', 'hue', 'saturation', 'luminosity',
			'color', 'add', 'subtract', 'average', 'pin-light', 'negation'];
		var columns = 5;
		var rows = Math.ceil(modes.length / columns);
		for (var y = 0, i = 0; y < rows; y++) {
			for (var x = 0; x < columns; x++) {
				var mode = modes[i];
				if (!mode)
					break;
				var point = (new Point(x, y) + 0.5) * (size + 20);
				makeExample(point, mode);
				i++;
			}
		}

		// all.opacity = 0.5;
		all.position = view.center;

		var svg = project.exportSVG();
		document.getElementById('svg').appendChild(svg);
		//console.log(svg, new XMLSerializer().serializeToString(svg));
	</script>
</head>
<body>
	<h2>Paper.js Canvas</h2>
	<canvas id="canvas" width="800" height="850"></canvas>
	<h2>SVG Export</h2>
	<div class id="svg"></div>
	<img id="ducky" style="display:none;" src="" />
</body>
</html>
